<template>
    <div class="have-footer loan-out-record">
        <!-- 我的借条 -->

        <template v-if='hasPublishingList'>
            <div class="big-title">正在出借</div>
            <div class="card-box" v-for='item in publishingList' @click='goDetailMe(item.lendNo)'>
                <div class="card">
                    <p class='loan-number'>出借编号:  {{item.lendNo}}</p>
                    <div class="card__header no-border">
                        <div class="loan-money">
                            <p class="loan-money__info loan-out">可借额度</p>
                        </div>
                        <p class="loan-money__amount purple">{{item.lendAmountFrom | toYuan}}～{{item.lendAmountTo | toYuan}}元</p>
                    </div>
                    <ul class="loan-out-info">
                        <li class="loan-out-info__item" v-if='item.daysType == "DAY"'>
                            <p>{{daysTransform(item.lendDaysFrom,item.lendDaysTo,'day')}}</p>
                            <span>可借时长</span>
                        </li>
                        <li class="loan-out-info__item" v-else>
                            <p>{{daysTransform(item.lendDaysFrom,item.lendDaysTo,'period')}}</p>
                            <span>可借时长</span>
                        </li>
                        <li class="loan-out-info__item">
                            <p>{{item.yearRate / 100}}%</p>
                            <span>年利率</span>
                        </li>
                        <li class="loan-out-info__item">
                            <p>{{item.serviceFeeRate / 100}}% | {{item.serviceFee | toYuan}}元</p>
                            <span>服务费</span>
                        </li>
                    </ul>
                    <p class="loan-out-data">
                        <span>{{item.applyCount}}</span>
                        人申请  |  {{ caclPersent(item.passCount, item.rejectCount) }}%通过  |  {{item.dealAvgTime | timeToHours}}小时处理</p>
                    <div class="card__share">
                        <span class="button short purple" @click.stop = 'share(item)'>分享出借</span>
                    </div>
                </div>
                <div class="new-apply" v-if='item.user' @click='statsLendNew(item)'>
                    <i>new</i>
                    <p>{{item.user.realName}}等{{item.pendingCount}}人申请未处理</p>
                    <span>立即查看</span>
                </div>
            </div>
        </template>

        <template v-if='hasClosedList'>
            <div class="big-title">已关闭的出借</div>
            <div class="card" v-for='item in closedList' @click='goDetailMe(item.lendNo)'>
                <p class='loan-number'>出借编号:  {{item.lendNo}}</p>
                <div class="card__header no-border">
                    <div class="loan-money">
                        <p class="loan-money__info loan-out">可借额度</p>
                    </div>
                    <p class="loan-money__amount purple">{{item.lendAmountFrom | toYuan}}～{{item.lendAmountTo | toYuan}}元</p>
                </div>
                <ul class="loan-out-info">
                    <li class="loan-out-info__item" v-if='item.daysType == "DAY"'>
                        <p>{{daysTransform(item.lendDaysFrom,item.lendDaysTo,'day')}}</p>
                        <span>可借时长</span>
                    </li>
                    <li class="loan-out-info__item" v-else>
                        <p>{{daysTransform(item.lendDaysFrom,item.lendDaysTo,'period')}}</p>
                        <span>可借时长</span>
                    </li>
                    <li class="loan-out-info__item">
                        <p>{{item.yearRate / 100}}%</p>
                        <span>年利率</span>
                    </li>
                    <li class="loan-out-info__item">
                        <p>{{item.yearRate / 100}}% | {{item.serviceFee | toYuan}}元</p>
                        <span>服务费</span>
                    </li>
                </ul>
                <p class="loan-out-data">
                    <span>{{item.applyCount}}</span>
                    人申请  |  {{ caclPersent(item.passCount, item.rejectCount) }}%通过  |  {{item.dealAvgTime | timeToHours}}小时处理</p>
               <!--  <div class="card__share">
                    <span class="button short purple">分享出借</span>
                </div> -->
            </div>
        </template>

        <p class="page-placeholder" v-if='!hasPublishingList && !hasClosedList'><span>暂无出借记录</span></p>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import { timeToHours } from '../filters/filter-timeFormat'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, loanOutApi } from '../api/api'
    import { scrollLoading, scrollLoadingOff } from '../utils/utils'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword
        },
        filters:{
            toYuan,
            dateFormat,
            timeToHours
        },
        data() {
            return {
                payPasswordShow:false,
                publishingList:[],
                closedList:[],
                payStatus:'',
                password:'',
                placeholder:'--',
                userCount:'',
                num:1,
                listInfo:{},
                list:{},
                records:[],
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasClosedList(){
                return !_.isEmpty(this.closedList)
            },
            hasPublishingList(){
                return !_.isEmpty(this.publishingList)
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setShare',
                'showShare'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },
            share(item){
                let protocol = location.protocol
                let host = location.host
                let pathname = location.pathname
                let search = location.search

                let realUrl = `${protocol}//${host}${pathname}${search}#share-loan-out/${item.lendNo}`
                let days

                if(item.daysType == 'DAY'){
                    days = this.daysTransform(item.lendDaysFrom,item.lendDaysTo,'day')
                }
                else{
                    days = this.daysTransform(item.lendDaysFrom,item.lendDaysTo,'period')
                }
                this.setShare({
                    message:{
                        title: '安牛有借，海量客户，一键拓客', // 分享标题
                        desc: `金额: ${toYuan(item.lendAmountFrom)}-${toYuan(item.lendAmountTo)},时长: ${days}, 利率: ${(item.yearRate / 100).toFixed(2)}%`, // 分享描述
                        link: realUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'https://youjie.kongapi.com/pic/loading_1.png', // 分享图标
                        type: '', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                        success: function () { 

                        },
                        cancel: function () { 

                        }
                    },
                    timeline:{
                        title: '安牛有借，海量客户，一键拓客', // 分享标题
                        link: realUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'https://youjie.kongapi.com/pic/loading_1.png', // 分享图标
                        success: function () { 
                            
                        },
                        cancel: function () { 

                        }
                    },
                    qq:{
                        title: '安牛有借，海量客户，一键拓客', // 分享标题
                        desc: `金额: ${toYuan(item.lendAmountFrom)}-${toYuan(item.lendAmountTo)},时长: ${days}, 利率: ${(item.yearRate / 100).toFixed(2)}%`, // 分享描述
                        link: realUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'https://youjie.kongapi.com/pic/loading_1.png', // 分享图标
                        success: function () { 
                            
                        },
                        cancel: function () { 

                        }
                    },
                })
                this.showShare()
            },

            // function

            statsLendNew(item){
                this.$ga.event({
                  eventCategory: 'Lendrecordnew_v',
                  eventAction: 'click',
                  eventLabel: '出借记录new提示点击次数'
                })
                allApi.onEvent({
                    eventType:'track_click',
                    eventName:'Lendrecordnew_v',
                    eventDescr:'出借记录new提示点击次数',
                    eventValue:JSON.stringify({
                        lendNo:item.lendNo
                    }),
                })
                console.log(item.lendNo)
            },

            daysTransform(from,to,type){
                let suffix
                let fromStr = from
                let toStr = to

                if(type == 'day') suffix = '天'
                else suffix = '期'

                if(from >= 30 && type == 'day'){
                    suffix = '个月'
                    fromStr = from / 30 
                    toStr = to / 30 

                }
                if(from == to){
                    return fromStr + suffix
                }
                else{
                    return fromStr + suffix + '~' + toStr + suffix
                }
            },
            caclPersent(pass,reject){
                if(pass == 0) return 0
                return (pass/(pass+reject)*100).toFixed(2)
            },
            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            goDetailMe(number){
                this.$router.push({
                    name:'loan-out-detail-me',
                    params:{
                        number:number
                    }
                })
            },
            goPay(){
                this.payStatus = true
                console.log(1)
            },
            getList(status){
                return loanOutApi.myList({
                    lendState:status
                })
                .then(result=>{
                    if(status == 'PUBLISHING'){
                        this.publishingList = result
                    }
                    else{
                        this.closedList = result
                    }
                })
            },
        },
        created(){

            this.showLoading()
            Promise.all([this.getList('PUBLISHING'), this.getList('CLOSED')])
            .then(result=> {
                this.hideLoading()
            })
            .catch(error=> {
                console.log(error);
                this.hideLoading()
            });
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .loan-out-record{
        .card-box{
            margin-bottom: 16px;
            .card{
                margin-bottom: 0;
            }
        }
        .want-loan{
            padding-top: 6px;
        }
        .want-loan__button{
            @extend %font-button;
            transition:background ease .3s;
            display: block;
            margin:0 auto;
            color: #fff;
            text-align: center;
            background:$purple;
            box-shadow:0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.12);
            border-radius:2px;
            width:159px;
            line-height:35px;
            &:active{
                background-color: darken($purple,5%);
            }
        }
        .want-loan__text{
            @extend %font-caption;
            padding-top: 6px;
            text-align: center;
        }
        .want-loan__record{
            padding-top: 12px;
            .button{
                color:$purple;
            }
        }
        .new-apply{
            @extend %font-caption;
            display: flex;
            align-items: center;
            background-color: #FFCCBC;
            padding:10px 16px;
            margin:0 16px;
            border-radius:0 0 3px 3px;
            i{
                display: block;
                padding:0 5px;
                color:#fff;
                background-color: $orange;
                border-radius:8px;
            }
            p{
                padding:0 8px;
            }
            span{
                display: block;
                color:$orange;
            }
        }
    }

</style>
